<template>
  <div class="container">
    <button @click="handleLoad">点击重新加载子级</button>
    <button @click="$router.push('/vueuse')">去往Vueuse组件</button>
    <hr>
    <KeySon :key="timer"></KeySon>
    <h2 v-set-color="'red'">Vue3.0 组合API Composition API</h2>
    <div v-loading="!(cityData.length > 0)" class="box"></div>
    <h4>爸爸有这些零花钱 money : {{ money }}</h4>
    <button @click="pay">爸爸发工资了</button>
    <Content></Content>
    <LifeCycle></LifeCycle>
    <Reactive></Reactive>
    <to-ref></to-ref>
    <MToRefs></MToRefs>
    <Ref></Ref>
    <HomeWork></HomeWork>
    <Computed></Computed>
    <Watch></Watch>
    <ref-attr></ref-attr>
    <h2>页面滚动的距离为 {{ y }} </h2>
    <!-- vue2.0写法, 父子通信双向绑定 -->
    <!--<PropsAndEmit :pocketMoney="money" @update:pocketMoney="money = $event"></PropsAndEmit>-->
    <!--<PropsAndEmit :pocketMoney.sync="money"></PropsAndEmit>-->

    <!-- vue3.0写法, 父子通信绑定 -->
    <PropsAndEmit v-model:pocketMoney="money"></PropsAndEmit>
    <!-- 是以下的简写: -->
    <!--<PropsAndEmit :pocketMoney="money" @update:pocketMoney="money = $event"></PropsAndEmit>-->

    <!-- -------------------------------------------------------------- -->
    <!-- 如果你想获取原生事件的事件对象 @click="$event.target.style.color = 'red'"  -->
    <!-- 如果绑定是函数 func  func(e) { // e就是事件对象 } -->
    <!-- 如果绑定的是js表达式, 此时提供一个默认的变量 $event -->

    <!-- 如果你想获取自定义事件, 此时 $event代码触发自定义事件的传参 -->
    <!-- 如果绑定是函数 func  func(data) { // data触发自定义事件的传参 } -->
    <!-- 如果绑定的是js表达式, 此时 $event代表触发自定义事件的传参 -->
    <!--<Son :modelValue="count"
         @click="$event.target.style.color = 'red'"
         @update:modelValue="count = $event"></Son>-->

    <!-- 简写模式 -->
    <Son v-model="count"
         @click="$event.target.style.color = 'red'">
    </Son>
    <hr>
    <!-- 纵向滚动 -->
    <ObserveDomY></ObserveDomY>
    <hr>
    <!-- 横向滚动 -->
    <ObserveDomX></ObserveDomX>
    <!-- Vue内置过渡组件的使用  -->
    <MTransition></MTransition>
  </div>
</template>
<script>
import Content from "../components/Content.vue";
import LifeCycle from "../components/LifeCycle.vue";
import Reactive from "../components/Reactive.vue";
import toRef from "../components/toRef.vue";
import MToRefs from '../components/MToRefs.vue'
import Ref from "../components/Ref.vue";
import {onMounted, onUnmounted, provide, reactive, ref, toRefs} from 'vue'
import HomeWork from "./HomeWork.vue";
import Computed from "../components/Computed.vue";
import Watch from "../components/Watch.vue";
import refAttr from "../components/refAttr.vue";
import PropsAndEmit from "../components/PropsAndEmit.vue";
import Son from "../components/Son.vue";
import {getRandomInt} from "../util/tool";
import ObserveDomY from "../components/ObserveDomY.vue";
import ObserveDomX from "../components/ObserveDomX.vue";
import MTransition from "../components/MTransition.vue";
import KeySon from "../components/KeySon.vue";
import {useWindowScroll, useTitle} from '@vueuse/core'
import getCityData from "../util/cityData.js";


export default {
  components: {
    KeySon,
    Content,
    LifeCycle,
    Reactive,
    toRef,
    MToRefs,
    Ref,
    HomeWork,
    Computed,
    Watch,
    refAttr,
    PropsAndEmit,
    Son,
    ObserveDomY,
    ObserveDomX,
    MTransition
  },
  name: 'App3',
  setup() {
    // 父组件的数据传递给子组件  App.vue --> PropsAndEmit.vue
    const money = ref(1000)
    const count = ref(99)
    const cityData = ref([])

    // 将数据提供给后代组件 provide
    /**
     * provide(key, value)
     */
    provide('money', money)


    // 爸爸发工资了
    const pay = () => {
      money.value += getRandomInt(6000, 8000)
    }
    const changeMoney = (e) => {
      console.log(`后代买玩具消费了 ${e} 元`)
      money.value -= e
    }
    // 将函数提供给后台组件 provide
    provide("changeMoney", changeMoney)


    const timer = ref(1)

    const handleLoad = () => {
      timer.value = new Date().getTime()
    }

    const {y} = useWindowScroll()

    // 响应式设置当前页面的Title属性
    const title = useTitle('New Title')

    // 返回数据
    getCityData().then(res => {
      cityData.value.push(...res)
    }).then(() => {
      console.log(cityData.value)
    })

    return {
      money,
      pay,
      count,
      timer,
      handleLoad,
      y,
      cityData
    }
  }
}
</script>
<style lang="less" scoped>

.box {
  margin: 50px 10px;
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
</style>
